<template>
    <div class="subject">
      <div class="primary-head">语文学科模版推荐</div>
      <div class="primary">
        <div v-for="item in imgArr1" :key="item.id">
          <Template :imgUrl="item.imgPath" :title="item.title"></Template>
        </div>
      </div>
      <div class="primary-head">数学学科模版推荐</div>
      <div class="primary">
        <div v-for="item in imgArr2" :key="item.id">
          <Template :imgUrl="item.imgPath" :title="item.title"></Template>
        </div>
      </div>
      <div class="primary-head">英语学科模版推荐</div>
      <div class="primary">
        <div v-for="item in imgArr3" :key="item.id">
          <Template :imgUrl="item.imgPath" :title="item.title"></Template>
        </div>
      </div>
      <div class="primary-head">科学学科模版推荐</div>
      <div class="primary">
        <div v-for="item in imgArr4" :key="item.id">
          <Template :imgUrl="item.imgPath" :title="item.title"></Template>
        </div>
      </div>
      <div class="primary-head">历史与社会学科模版推荐</div>
      <div class="primary-2">
        <div v-for="item in imgArr5" :key="item.id">
          <Template :imgUrl="item.imgPath" :title="item.title"></Template>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import Template from '@/views/design-template/component/index.vue'
import { imgArr1,imgArr2,imgArr3,imgArr4,imgArr5 } from '@/views/design-template/subject/components/imgData'
</script>

<style scoped lang="less">
@import url('@/views/design-template/subject/subject.less');
</style>